import {getParams} from "@/utils";
import EditCell from "@/components/editTable/EditCell.js";
import './editTable.less';

const EditTable = {
    name: 'EditTable',
    components: {
      EditCell
    },
    inject: {
        connectStore: {
            default: () => ({})
        }
    },
    props: {
        columns: {
            type: [Array],
            default: () => ({})
        },
        dataSource: {
            type: [Array],
            default: () => ({})
        }
    },
    watch: {
        dataSource: {
            deep: true,
            handler: function (value) {
                this.$store.commit('admin/dataSourceLengthChange', !!value.length)
            }
        }
    },
    computed: {
        TableContext() {
            return this.connectStore.value.TableContext;
        },
        AdminLayout() {
            return this.connectStore.value.AdminLayout
        }
    },
    render() {
        const {formGuid} = getParams();
        const displayLength = this.columns.filter(item => item.display);
        const columns = this.columns.map((item) => {
            if(displayLength.length < 6 && this.columns.length < 6) {
                item.fixed = false;
            }
            if (!item.edit) {
                if (item.dataIndex === 'action') {
                    return item;
                }
                return {
                    ...item,
                    width: formGuid
                        ?
                        item.width
                        :
                        item.display
                            ?
                            item.width
                            :
                            0
                }
            }
            return {
                ...item,
                customHeaderCell: () => {
                    return {
                        style: {
                            color: 'red'
                        }
                    }
                },
                customRender: (value, record) => {
                    return (
                        <edit-cell
                            title={item.title}
                            edit={item.edit}
                            record={record}
                            value={item.title === '是否采购' ? isNaN(Number(value)) ? value : Number(value) ? '是' : '否' : value}
                            focusUrl={item.focusUrl}
                            columnSelectOptions={item.columnSelectOptions}
                            componentType={item.componentType}
                            isRules={item.isRules}
                            isNumber={item.isNumber}
                            dataIndex={item.dataIndex}
                            selectViewOptions={item.selectViewOptions}
                            isUrlSpecial={item.isUrlSpecial}
                            showSearch={item.showSearch}
                        />
                    )
                },
            }
        });
        return(
            <a-table
                loading={this.TableContext.tableLoading}
                bordered={true}
                dataSource={this.dataSource}
                columns={columns}
                rowKey={(record) => record.RN}
                scroll={{
                    x: 100,
                    y: '100%'
                }}
            />
        )
    },
};

export default EditTable;
